<!-- 配置 -->
<template>
	<a-modal v-bind="options">
		<vxe-grid ref="grid" v-bind="gridOptions" :data="dataOptions">
			<template #costBearing="{row}">
				<a-radio-group v-model:value="row.type" :disabled="!hasPermissions(['mk_contract_charter_party_xgzfpz'])" @change="radioChange">
					<a-radio :disabled="inApproval" :value="1">公司</a-radio>
					<a-radio :disabled="inApproval" :value="2">员工</a-radio>
				</a-radio-group>
			</template>
		</vxe-grid>
		<template #footer>
			<a-radio-group v-model:value="selectAll" :disabled="!hasPermissions(['mk_contract_charter_party_xgzfpz'])">
				<a-radio :value="1" :disabled="inApproval" @click="selectFun(1)">全选公司</a-radio>
				<a-radio :value="2" :disabled="inApproval" @click="selectFun(2)">全选员工</a-radio>
			</a-radio-group>
			<a-button v-action="['mk_contract_charter_party_xgzfpz']" type="primary" :disabled="inApproval || props.processInstanceId" @click="save">确定</a-button>
		</template>
	</a-modal>
</template>

<script setup lang="ts">
	import {computed, reactive, ref, toRef, watchEffect} from 'vue'
	import {VxeGridProps} from 'vxe-table'
	import {getDispose} from '@/api/charter-contract'
	import {modifyConfiguration} from '@/api/contract'
	import {useStore} from '@/store'
	import XEUtils from 'xe-utils'

	const hasPermissions = useStore().hasPermissions
	const emits = defineEmits(['update:visible', 'close'])
	const props = defineProps<{
		visible: boolean
		id?: string
		approvalStatus?: string | number
		processInstanceId?: string
	}>()

	// 是否处于审批（1审批中、2已驳回、4已撤消）
	const inApproval = computed(() => [1, 2, 4].includes(XEUtils.toNumber(props.approvalStatus)))

	const grid = ref()
	const selectAll = ref<any>(1)
	const options = reactive({
		width: 640,
		title: '费用支付配置',
		centered: true,
		maskClosable: false,
		destroyOnClose: true,
		visible: toRef(props, 'visible'),
		bodyStyle: {
			padding: '12px'
		},
		onCancel() {
			emits('update:visible', false)
			setTimeout(() => emits('close'), 100)
		},
		onOk() {
			emits('update:visible', false)
		}
	})
	const gridOptions = reactive<VxeGridProps>({
		size: 'mini',
		height: 600,
		rowConfig: {
			isHover: true
		},
		columns: [
			{
				title: '费用科目',
				field: 'feeSubjectName'
			},
			{
				width: '200',
				title: '费用承担方',
				align: 'center',
				slots: {
					default: 'costBearing'
				}
			}
		]
	})

	const selectFun = (type: number) => {
		dataOptions.value.forEach(e => (e.type = type))
	}

	const dataOptions = ref<any>([])

	const getDisposeF = () => {
		getDispose(props.id as string).then((res: any) => {
			dataOptions.value = res.data
			if (res.data.every((e: any) => e.type === 1)) {
				selectAll.value = 1
			} else if (res.data.every((e: any) => e.type === 2)) {
				selectAll.value = 2
			} else {
				selectAll.value = null
			}
		})
	}
	watchEffect(() => {
		if (props.visible) {
			getDisposeF()
		}
	})

	const radioChange = (item: any) => {
		console.log(item)
		let value = item.target.value
		grid.value?.refreshColumn()
		if (grid.value.getTableData().fullData.every((e: any) => e.type == value)) {
			selectAll.value = value
		} else {
			selectAll.value = null
		}
	}
	const save = () => {
		const data = {
			enterPriseContractId: props.id,
			costPaymentConfigs: dataOptions.value.map((e: any) => {
				return {
					feeSubjectId: e.feeSubjectId,
					feeSubjectName: e.feeSubjectName,
					type: e.type
				}
			})
		}
		modifyConfiguration(data).then((res: any) => {
			emits('update:visible', false)
		})
	}
</script>
